import React, {Component} from 'react';
import {Button, Flex, Modal, Radio, Toast, WingBlank, WhiteSpace} from '@ant-design/react-native';
import {Image, ScrollView, Text, View} from 'react-native';
import {getOwnerHouseBuilding} from '~/api/owner';
const RadioItem = Radio.RadioItem;

class SelectOwnerHouse extends Component {
    constructor(props) {
        super(props);
        this.state = {
            houselist: [],
            ownerhouseid: '',
        };
        getOwnerHouseBuilding(this.props.parkinginfo.CompanyBuildingID).then((r) => {
            if (r.code === 0) {
                this.setState({
                    houselist: r.data,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    }

    render() {
        return (
            <Modal style={{backgroundColor: '#F6F6F6'}} popup visible={this.props.houseselectvisible} animationType="slide-up" onClose={this.onClose}>
                <WingBlank>
                    <Flex justify={'between'}>
                        <Flex>
                            {this.props.parkinginfo.BuyKind === 1 && (
                                <View
                                    style={{
                                        height: 20,
                                        marginTop: 10,
                                    }}>
                                    <Text
                                        style={{
                                            color: '#EC4F46',
                                        }}>
                                        注：只能本小区人员购买
                                    </Text>
                                </View>
                            )}
                        </Flex>
                        <Flex
                            style={{marginTop: 15, marginRight: 5}}
                            onPress={() => {
                                this.props.navigation.push('Information', {
                                    parkinginfo: this.props.parkinginfo,
                                });
                                this.props.onClose();
                            }}>
                            <Image style={{width: 20, height: 20}} source={require('~/assets/parkinfo/jia.png')} />
                        </Flex>
                    </Flex>
                </WingBlank>
                <ScrollView style={{width: '100%', height: 300}}>
                    {this.state.houselist.map((item, index) => {
                        return (
                            this.props.parkinginfo.CompanyBuildingID === item.CompanyBuildingID && (
                                <WingBlank>
                                    <WhiteSpace size="md" />
                                    <RadioItem
                                        style={{backgroundColor: '#FFFFFF', borderRadius: 15}}
                                        checked={this.state.ownerhouseid === item.OwnerHouseID}
                                        onChange={(event) => {
                                            if (event.target.checked) {
                                                this.setState({ownerhouseid: item.OwnerHouseID});
                                            }
                                        }}>
                                        <Flex
                                            style={{
                                                marginTop: 10,
                                                width: '100%',
                                                marginBottom: 10,
                                            }}
                                            align={'start'}
                                            direction={'column'}>
                                            <Text>姓名：{item.HouseOwner}</Text>
                                            <Text style={{color: '#999999'}}>小区名：{item.BuildingName}</Text>
                                            <Text style={{color: '#999999'}}>身份证号码：{item.IDCard}</Text>
                                            <Text style={{color: '#999999'}}>门牌号：{item.HouseNo}</Text>
                                        </Flex>
                                    </RadioItem>
                                </WingBlank>
                            )
                        );
                    })}
                    {this.state.houselist.map((item, index) => {
                        return (
                            this.props.parkinginfo.CompanyBuildingID !== item.CompanyBuildingID && (
                                <WingBlank>
                                    <WhiteSpace size="md" />
                                    {this.props.parkinginfo.BuyKind === 1 ? (
                                        <RadioItem
                                            style={{backgroundColor: '#d3d3d3', borderRadius: 15}}
                                            onChange={() => {
                                                Toast.info('该身份不能用于购买本小区车位', 1);
                                            }}>
                                            <Flex
                                                style={{
                                                    marginTop: 10,
                                                    width: '100%',
                                                    marginBottom: 10,
                                                }}
                                                align={'start'}
                                                direction={'column'}>
                                                <Text>姓名：{item.HouseOwner}</Text>
                                                <Text style={{color: '#999999'}}>小区名：{item.BuildingName}</Text>
                                                <Text style={{color: '#999999'}}>身份证号码：{item.IDCard}</Text>
                                                <Text style={{color: '#999999'}}>门牌号：{item.HouseNo}</Text>
                                            </Flex>
                                        </RadioItem>
                                    ) : (
                                        <RadioItem
                                            style={{backgroundColor: '#FFFFFF', borderRadius: 15}}
                                            checked={this.state.ownerhouseid === item.OwnerHouseID}
                                            onChange={(event) => {
                                                if (event.target.checked) {
                                                    this.state.ownerhouseid = item.OwnerHouseID;
                                                    this.props.onparkSave({
                                                        parkingid: this.props.parkinginfo.ParkingDataID,
                                                        ownerhouseid: item.OwnerHouseID,
                                                    });
                                                }
                                            }}>
                                            <Flex
                                                style={{
                                                    marginTop: 10,
                                                    width: '100%',
                                                    marginBottom: 10,
                                                }}
                                                align={'start'}
                                                direction={'column'}>
                                                <Text>姓名：{item.HouseOwner}</Text>
                                                <Text style={{color: '#999999'}}>小区名：{item.BuildingName}</Text>
                                                <Text style={{color: '#999999'}}>身份证号码：{item.IDCard}</Text>
                                                <Text style={{color: '#999999'}}>门牌号：{item.HouseNo}</Text>
                                            </Flex>
                                        </RadioItem>
                                    )}
                                </WingBlank>
                            )
                        );
                    })}
                </ScrollView>
                <WingBlank size={'lg'}>
                    <Flex direction={'row'} justify={'between'}>
                        <Button
                            style={{
                                width: '45%',
                                marginTop: 30,
                                backgroundColor: '#F2BC38',
                                borderColor: '#F2BC38',
                            }}
                            type={'primary'}
                            onPress={this.props.onClose}>
                            取消
                        </Button>
                        <Button
                            style={{width: '45%', marginTop: 30}}
                            type={'warning'}
                            onPress={() => {
                                this.props.confirmorder(this.state.ownerhouseid);
                            }}>
                            确定
                        </Button>
                    </Flex>
                </WingBlank>
            </Modal>
        );
    }
}

export default SelectOwnerHouse;
